<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圆弧旋转Loading</title>
	</head>
	<style>
		body,html{
			width: 100%;
			height: 100%;
			background-color: gray;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: -1000;
			overflow: hidden;
		}
		:root{
			--top:#55828b;
			--left:#4f772d;
			--right:#c18c5d;
		}
		.loading{
			width: 100px;
			height: 100px;
			font-size: 15px;
			font-family: "copperplate gothic light";
			line-height: 100px;
			text-align: center;
			font-weight: 800;
			color: #FFEBCD;
			text-shadow: 5px 5px 10px white;

			}
			.border{
				animation: animation 0.5s linear 0s infinite none;
				top: -100px;
				position: relative;
				width: 100px;
				height: 100px;
				border-top: 5px solid var(--top);
				border-radius: 50%;
			}
			.border::after ,.border::before{
				position: absolute;
				content: '';
				width: 100px;
				height: 100px;
				border-radius: 50%;
				top: -5px;
			}
			.border::after{
				left: 0;
				transform: rotate(120deg);
				border-top: 5px solid var(--right);
			}
			.border::before{
				left: 0;
				transform: rotate(-120deg);
				border-top: 5px solid var(--left);	
}
			@keyframes animation{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
	</style>
	<body>
		<div class="loading">Loading....
			<div class="border"></div>
		</div>
	</body>
</html>
